<template>
    <div class="game-type-list" v-loading="loading">
        <el-button type="success" class="btn" @click="goTypeDetail(0)">新建</el-button>

        <div class="table-box">
            <div class="title-box">
                <div class="item">ID</div>
                <div class="item">游戏类型</div>
                <div class="item">关联游戏标签数</div>
                <div class="item" style="flex:4;padding:0;">
                    <div class="item" style="flex: 1;">关联游戏标签</div>
                    <div class="item" style="flex: 1;">是否同步至排行榜</div>
                    <div class="item" style="border-right:none;flex:1;">标签关联游戏数</div>
                </div>
                <div class="item">分类排行榜顺序</div>
                <div class="item">关联游戏个数</div>
                <div class="item">是否在排行榜中显示</div>
                <div class="item">操作</div>
            </div>
            <div class="content-box">
                <div class="dragging-item"
                    v-for="(item, index) in list"
                    v-dragging="{ item: item, list: list}"
                    :key="index">
                    <div class="item">{{item.category}}</div>
                    <div class="item">{{item.name}}</div>
                    <div class="item">{{item.labelNum || '-'}}</div>
                    <div class="item" style="flex:4;padding:0;">
                        <div style="width:100%;height:100%;">
                            <template v-if="item.adminGameTagList && item.adminGameTagList.length">
                                <div class="tag-box" v-for="(_item, _index) in item.adminGameTagList" :key="_index">
                                    <div class="tag-name">
                                        <span class="tag-btn" @click="goTagGameRank(_item.configId)">{{_item.tagName}}</span>
                                    </div>
                                    <div class="tag-name">
                                        <span v-if="_item.status === 1">是</span>
                                        <span v-else>-</span>
                                    </div>
                                    <div class="tag-num">
                                        <span>{{_item.gameCount || '-'}}</span>
                                    </div>
                                </div>
                            </template>
                            <div v-else style="padding:10px;">-</div>
                        </div>
                    </div>
                    <div class="item">{{item.sort}}</div>
                    <div class="item">{{item.gameNum || '-'}}</div>
                    <div class="item">
                        <div v-if="item.synchronizeToRank">是</div>
                        <div v-else>-</div>
                    </div>
                    <div class="item" style="padding:0 10px">
                        <el-button @click="goTypeDetail(item.category)" type="text" size="small">编辑</el-button>
                        <el-button @click="updateTypeStatus(item, 1)" v-if="item.status === 0" type="text" size="small">上架</el-button>
                        <el-button @click="updateTypeStatus(item, 0)" v-else style="color:red;" type="text" size="small">下架</el-button>
                    </div>
                </div>
            </div>
        </div>

        <div class="save-box" v-if="changeNum > 1">
            <el-button class="btn" @click="notSave">取消</el-button>
            <el-button type="success" class="btn" @click="saveSort">保存最新排序</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            keyword: '',
            changeNum: 0,
            list: []
        }
    },
    created () {
        this.getDataList()
    },

    watch: {
        list (val) {
            this.changeNum++
        }
    },

    methods: {
        // 获取类型列表
        async getDataList () {
            if (this.loading) return
            this.loading = true
            let params = {}
            if (this.keyword) {
                params.keyword = this.keyword
            }
            let res = await this.$http.post('/game/findGameCategories', params)
            if (res.code === '0') {
                this.currentList = JSON.parse(JSON.stringify(res.data))
                this.list = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 去标签游戏排行榜
        goTagGameRank (id) {
            this.$router.push({
                path: '/game/gameTagDetail',
                query: {
                    id
                }
            })
        },

        // 编辑类型
        goTypeDetail (id) {
            let query = {}
            if (id) {
                query.id = id
            }
            this.$router.push({
                path: '/game/typeDetail',
                query
            })
        },

        // 更改游戏类型
        async updateTypeStatus (item, status) {
            let res = await this.$http.post('/game/updateGameCategoryStatus', {
                category: item.category,
                status
            })
            if (res.code === '0') {
                item.status = status
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 取消保存
        notSave () {
            this.list = JSON.parse(JSON.stringify(this.currentList))
            this.changeNum = 0
        },

        // POST /admin
        async saveSort () {
            if (this.loading) return
            this.loading = true
            let categoryIdList = []
            this.list.forEach((item) => {
                categoryIdList.push(item.category)
            })
            let res = await this.$http.post('/game/updateGameCategorySort', categoryIdList)
            if (res.code === '0') {
                this.changeNum = 1
                this.currentList = JSON.parse(JSON.stringify(this.list))
                this.$message({
                    type: 'success',
                    message: '保存最新排序成功！'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        }
    }
}
</script>

<style lang="scss" scoped>
    .game-type-list {
        padding-bottom: 20px;
        .input-box {
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin: 20px 0;
            border: 1px solid #ebeef5;
            border-bottom: none;
            border-right: none;
            .title-box {
                display: flex;
                border-bottom: 1px solid #ebeef5;
                .item {
                    display: flex;
                    flex: 1;
                    align-items: center;
                    padding: 10px;
                    height: 60px;
                    font-size: 14px;
                    color: #909399;
                    font-weight: bold;
                    border-right: 1px solid #ebeef5;
                }
            }

            .content-box {
                .dragging-item {
                    display: flex;
                    border-bottom: 1px solid #ebeef5;
                    &:hover {
                        background-color: #F5F7FA;;
                    }
                    .item {
                        padding: 10px;
                        font-size: 14px;
                        flex: 1;
                        color: #606266;
                        display: flex;
                        align-items: center;
                        border-right: 1px solid #ebeef5;
                        .tag-box {
                            width: 100%;
                            display: flex;
                            border-bottom: 1px solid #ebeef5;
                            // height: 100%;
                            &:last-child {
                                border-bottom: none;
                            }
                            > div {
                                flex: 1;
                                padding: 10px;
                            }
                            .tag-name {
                                border-right: 1px solid #ebeef5;
                            }
                        }
                        .tag-btn {
                            color: #409EFF;
                            cursor: pointer;
                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
        }

        .save-box {
        }
    }
</style>
